<template>
<div class="baseStyle">
  <div class="quizDetial" v-loading="loading">
    <el-row>
      <el-col class="titleStyle">{{ quizDetialShow.title }}</el-col>
    </el-row>
    <el-row style="padding-top: 10px">
      <el-col v-html="quizDetialShow.roomContent"></el-col>
    </el-row>
    <el-row style="padding-top: 10px">
      <el-col v-html="quizDetialShow.content"></el-col>
    </el-row>
    <el-row style="padding-top: 10px">
      <el-col><span>预习测试</span></el-col>
    </el-row>
    <el-row v-for="(item,index) in questionVoList" :key="index">
      <el-col>
        <el-row><span>{{ index+1 }}.{{item.questionContent}}</span></el-row>
        <el-radio-group v-model="item.answerId">
          <el-row v-for="answer in item.quizAnswerList" :key="answer.id">
            <el-radio :label="answer.id">{{answer.content}}</el-radio>
          </el-row>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" size="small" @click="saveQuizResult">提交</el-button>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      quizDetialShow: {},
      questionVoList: [],
      userQuizForm: {
        userQuiz:{
          userId: localStorage.userId,
          quizId: null, // 实验id
          totalScore: 0
        },
        userQuizResultVoList: []
      }
    }
  },
  created() {
    if(typeof this.$route.query.quizBaseForm !== 'object') {
      this.$router.push({path: '/quiz'})
      return
    }
    this.quizDetialShow = Object.assign({},this.$route.query.quizBaseForm)
    this.userQuizForm.userQuiz.quizId = this.quizDetialShow.id
    this.getQuestionList()
  },
  methods: {
    getQuestionList() {
      debugger
      if(this.quizDetialShow === undefined) {
        return
      }
      let url = '/quiz/getQuestionList?quizId=' + this.quizDetialShow.id
      this.$http.post(url,{}).then(data => {
          debugger
          if (data.data.success === true) {
              this.questionVoList = data.data.data.questionVoList
          } else {
              this.$message.error(data.message)
          }
      })
    },
    saveQuizResult() {
      this.loading = true
      this.handleFormData().then(() => {
        let url = '/quiz/saveQuizResult'
        this.$http.post(url,this.userQuizForm).then(data => {
            this.loading = false
            if (data.data.success === true) {
                // TODO 跳转上传报告
                this.$message.success('跳转上传报告')
                debugger
                this.$router.push({path:'/tableDataQuiz', query: {id: this.quizDetialShow.id, userQuizId: data.data.data, quizType: this.quizDetialShow.quizType}})
            } else {
                this.$message.error(data.message)
            }
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },
    // 判断数组是否为空
    arrayIsEmpty(array) {
      if(array === undefined || array === null || array.length < 1) {
        return true
      }
      return false
    },
    handleFormData() {
      var self = this
      return new Promise((resolve, reject) => {
        if(self.arrayIsEmpty(self.questionVoList)) {
          self.$message.info('没有题目')
          reject()
          return
        }
        self.userQuizForm.userQuizResultVoList = []
        self.userQuizForm.userQuiz.totalScore = 0
        var correctNum = 0
        self.questionVoList.forEach(v => {
          // 整理答案数据
          var questionVo = {
            userQuizId: null,
            questionId: v.id,
            answerId: v.answerId,
            isRight: false,
            score: 0
          }
          // 算选择题总分
          var answer = v.quizAnswerList.find(ans => {
            return ans.id === v.answerId
          })
          if(answer !== undefined && answer.isAnswer) {
            self.userQuizForm.userQuiz.totalScore+=Number(answer.score)
            questionVo.isRight = true
            questionVo.score = Number(answer.score)
            correctNum++
          }
          self.userQuizForm.userQuizResultVoList.push(questionVo)
        })
        if(correctNum < 4 ) {
          self.$message.error('预习测试需要答对四题及以上才能提交实验报告，请重新答题')
          reject()
          return
        }
        resolve()
      })
    }
  }
}
</script>

<style scoped>
.quizDetial {
    padding: 20px 20px;
}

.titleStyle {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}
</style>



